import { Button, Checkbox, Form, Input, Typography } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import { PostTokenParams, apiPostToken } from '../../../api/token'

const { Title } = Typography

const onFinishFailed = (errorInfo: unknown) => {
    console.log('Failed:', errorInfo)
}

interface FieldType extends PostTokenParams {
    remember?: string;
}

const registerStyle:React.CSSProperties ={
    position:'absolute',
    left:'50%',
    bottom:'-10%',
    transform:'translate(-50%, -50%)'
} 

const moduleStyle: React.CSSProperties = {
    // paddingTop: 40,
    // paddingLeft: 40,
    // paddingRight: 40,
}
const LoginForm: React.FC = () => {
    const navigate = useNavigate()
    const onFinish = async (values: FieldType) => {
        console.log('Success:', values)
        try {
            const data = await apiPostToken(values) 
            localStorage.setItem('token',data.token)
            navigate('/')
        } catch (error) {
            console.log(error)
        }
    }
    return (
        <div style={moduleStyle}>
            <Typography>
                <Title level={3}>
                    欢迎使用图片管理系统
                </Title>
                <br />
            </Typography>
            <Form
                name='basic'
                layout='vertical'
                style={{minWidth:344}}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete='off'
                size='large'
            >
                <Form.Item<FieldType>
                    name='username'
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请输入你的账号'/>
                </Form.Item>

                <Form.Item<FieldType>
                    name='password'
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password placeholder='请输入你的密码'/>
                </Form.Item>

                <Form.Item<FieldType>
                    name='remember'
                    valuePropName='checked'
                >
                    <Checkbox>记住账号</Checkbox>
                </Form.Item>

                <Form.Item>
                    <Button type='primary' htmlType='submit' size='large' block>
                        登录
                    </Button>
                </Form.Item>
                <div style={registerStyle}>
                    还没有账号？
                    <Link to={'/register'}>立即注册</Link>
                </div>
            </Form>
        </div>

    )
}

export default LoginForm